﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="/style/rightdirectory.css" rel="stylesheet" />
    <script src="/script/config.js"></script>
    <style type="text/css">
        .panel-body {
            padding: 0 !important;
        }

        .list-group-item {
            border-left: none !important;
            border-right: none !important;
        }

        .view-page {
            height: 300px !important;
            padding: 10px 0 0 0 !important;
            border: 1px solid #efefef;
            margin-bottom: 10px;
        }

        .plist, .slist, .tlist {
            height: 280px !important;
        }

        .plist, .slist, .tlist {
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class="col-md-12 col-lg-12" style="margin-top:15px;padding-left:0px;">
        <div class="form-group col-md-3 col-lg-3">
            <div class="input-group">
                <span class="input-group-addon">订单号</span>
                <input type="text" id="OrderNo" class="form-control" placeholder="订单号">
            </div>
        </div>
        <div class="form-group col-md-1 col-lg-1">
            <div class="input-group">
                <button class="btn" type="button" onclick="Search()">搜索</button>
                &nbsp;
                <button class="btn" type="button" onclick="Delete()">删除</button>
            </div>
        </div>
    </div>
    <div class="col-md-12 col-lg-12 view-page">
        <div class="col-md-3 col-lg-3 plist">
            <div class="panel">
                <div class="panel-heading">
                    产品列表
                </div>
                <div class="panel-body">
                    <div class="list-group productlist">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-lg-3 slist">
            <div class="panel">
                <div class="panel-heading">
                    SKU列表<button class="btn" type="button" style="float:right;padding:0 3px !important;" onclick="AddProductSKU()">添加</button>
                </div>
                <div class="panel-body">
                    <div class="list-group skulist">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-6 tlist">
            <div class="panel">
                <div class="panel-heading">
                    赠送产品<button class="btn" type="button" style="float:right;padding:0 3px !important;" onclick="SubmitPresentProduct()">确定</button>
                </div>
                <div class="panel-body">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>产品</th>
                                <th>SKU</th>
                                <th>数量</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody class="chooseData"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="view-data">
        <table id="table" class="table table-bordered" data-post="">
            <thead>
                <tr>
                    <th class="checkboxs">
                        <label class="checkbox-reset">
                            <input type="checkbox" data-checked-table="all" />
                        </label>
                    </th>
                    <th>订单号</th>
                    <th>产品名称</th>
                    <th>产品SKU名称</th>
                    <th>数量</th>
                </tr>
            </thead>
            <tbody class="presentProdutList"></tbody>
        </table>
        <!--分页条 默认选择id=list-page元素-->
        <div id="list-page" class="view-pagination-page"></div>
    </div>
</body>
</html>
<script type="text/html" id="tb-product">
    {{each list pdata}}
    <a href="#" class="list-group-item" data-id="{{pdata.Id}}">{{pdata.ProductName}}</a>
    {{/each}}
</script>
<script type="text/html" id="tb-sku">
    {{each list sdata}}
    <a href="#" class="list-group-item" data-pid="{{sdata.Product_Id}}" data-sku="{{sdata.SkuProperty}}">{{sdata.SkuName}}</a>
    {{/each}}
</script>
<script type="text/html" id="tb-table">
    {{each list tdata}}
    <tr>
        <td data-pid="{{tdata.Product_Id}}">{{tdata.ProductName}}</td>
        <td data-sku="{{tdata.SkuProperty}}">{{tdata.SkuName}}</td>
        <td><input type="text" class="form-control" placeholder="" value="{{tdata.Number}}"></td>
        <td><button class="btn" type="button" style="float:right;padding:0 3px !important;" onclick="DeleteProduct({{tdata.Product_Id}},'{{tdata.SkuProperty}}',this)">删除</button></td>
    </tr>
    {{/each}}
</script>

<script type="text/html" id="tb-tablelist">
    {{each list d}}
    <tr data-pid="{{d.Id}}">
        <td class="checkboxs">
            <label class="checkbox-reset">
                <input type="checkbox" value="{{d.Id}}" data-checked-table="single" />
            </label>
        </td>
        <td>{{d.OrderNo}}</td>
        <td>{{d.ProductName}}</td>
        <td>{{d.SkuName}}</td>
        <td>{{d.Number}}</td>
    </tr>
    {{/each}}
</script>


<script type="text/javascript">
    var data = [];
    var chooseSKUData = [];
    var orderNo = QueryPageUrlString("o");
    $(function () {
        if (orderNo != "" && orderNo != undefined) {
            $("#OrderNo").val(orderNo);
        }
        $.http.request(
            "orderpresent/list", {},
            {
                pass: function (d, status, xhr) {
                    data = d;
                    loadProductHtml();
                    loadItemScript();
                }
            }
        );
    });
    function loadItemScript() {
        $(".list-group-item").click(function () {
            $(this).siblings().removeClass("active");
            $(this).addClass("active");
        });
    }
    function loadTableHtml() {
        $(".chooseData").html(template("tb-table", {
            list: chooseSKUData
        }));
    }
    function loadSKUHtml(data) {
        $(".skulist").html(template("tb-sku", {
            list: data
        }));
        $(".skulist .list-group-item").click(function () {
            if ($(this).hasClass("active")) {
                $(this).removeClass("active");
                return;
            }
            $(this).addClass("active");
        });
    }
    function loadProductHtml() {
        $(".productlist").append(template("tb-product", {
            list: data.products
        }));
        $(".productlist .list-group-item").click(function () {
            var id = $(this).attr("data-id");
            var SKUData = [];
            $.each(data.sKUs, function (i, item) {
                if (item.Product_Id == id) { SKUData.push(item); }
            });
            loadSKUHtml(SKUData);
        });
    }
    function AddProductSKU() {
        $.each($(".skulist .active"), function (i, item) {
            var pName = "";
            var skuProperty = "";
            var pId = 0;
            $.each(data.products, function (j, jitem) {
                if ($(item).attr("data-pid") == jitem.Id) {
                    pName = jitem.ProductName;
                    skuProperty = $(item).attr("data-sku");
                    pId = jitem.Id;
                }
            });
            var status = 0;
            $.each(chooseSKUData, function (k, kitem) {
                if (kitem.Product_Id == pId && kitem.SkuProperty == skuProperty) {
                    status = 1;
                }
            });
            if (status == 0) {
                chooseSKUData.push({ "Product_Id": $(this).attr("data-pid"), "ProductName": pName, "SkuProperty": $(this).attr("data-sku"), "SkuName": $(this).html(), "Number": 1 });
            }
        });
        loadTableHtml();
    }
    function SubmitPresentProduct() {
        var Data = [];
        $.each($(".chooseData tr"), function (i, item) {
            var obj = $(this).find('td');
            Data.push({ OrderNo: $("#OrderNo").val(), Product_Id: $(obj[0]).attr("data-pid"), ProductName: $(obj[0]).html(), SkuProperty: $(obj[1]).attr("data-sku"), SkuName: $(obj[1]).html(), Number: $(obj[2]).find("input").val() });
        });
        $.http.request(
            "orderpresent/insert", { OrderPresentProductInfo: Data },
            {
                pass: function (d, status, xhr) {
                    if (d.Errcode == 0) {
                        $.msgSucceed(d.Errmsg);
                        Search();
                    } else {
                        $.msgFall(d.Errmsg);
                    }
                }
            }
        );
    }
    function DeleteProduct(pid, sku, obj) {
        var _this = obj;
        var tempData = [];
        $.each(chooseSKUData, function (k, kitem) {
            if (kitem.Product_Id != pid || kitem.SkuProperty != sku) {
                tempData.push(kitem);
            } else {
                $(_this).parents("tr").remove();
            }
        });
        chooseSKUData = tempData;
    }
    //操作实际数据
    function Search() {
        $.http.request(
            "orderpresent/search", { OrderNo: $("#OrderNo").val()},
            {
                pass: function (d, status, xhr) {
                    $(".presentProdutList").html(template("tb-tablelist", {
                        list: d
                    }));
                }
            }
        );
    }
    function Delete() {
        var arr = [];
        var checkbox = $("#table").getTableChecked({ type: {} });
        if (checkbox.length <= 0) {
            $.msgFall("请选择要操作的对象！"); return;
        }
        $.each(checkbox, function (i, item) {
            arr.push(parseInt(item));
        });
        $.http.request(
            "orderpresent/delete", { Ids: arr },
            {
                pass: function (d, status, xhr) {
                    if (d.Errcode == 0) {
                        $.msgSucceed(d.Errmsg);
                        Search();
                    } else {
                        $.msgFall(d.Errmsg);
                    }
                }
            }
        );
    }
</script>
